<!-- 用户登录页面 - 提供用户登录功能，支持邮箱密码登录和社交登录 -->
<template>
    <div class="user-login-page">
        <!-- 统一导航栏组件 -->
        <AppHeader />

        <!-- 登录页面主要内容区域 -->
        <main class="user-login-container">
            <!-- 登录卡片容器 -->
            <div class="user-login-card">
                <!-- 语言选择器 - 支持多语言切换 -->
                <div class="language-selector">
                    <el-select v-model="currentLanguage" placeholder="语言选择" size="small">
                        <el-option label="中文简体" value="zh-CN" />
                        <el-option label="English" value="en-US" />
                    </el-select>
                </div>

                <!-- 登录表单区域 -->
                <div class="login-form">
                    <!-- 示例数据提示 -->
                    <div v-if="isUsingSampleData" class="sample-data-notice">
                        <el-alert
                            title="示例数据模式"
                            description="后端服务暂时不可用，当前使用示例数据进行演示。"
                            type="info"
                            :closable="false"
                            show-icon
                        />
                    </div>
                    
                    <!-- 表单标题 -->
                    <h2 class="form-title">用户登录</h2>

                    <!-- 邮箱输入字段 -->
                    <div class="form-group">
                        <el-input v-model="loginForm.email" placeholder="邮箱" type="email" size="large"
                            :prefix-icon="Message" />
                    </div>

                    <!-- 密码输入字段 -->
                    <div class="form-group">
                        <el-input v-model="loginForm.password" placeholder="密码" type="password" size="large"
                            :prefix-icon="Lock" show-password />
                    </div>

                    <!-- 登录选项区域 -->
                    <div class="login-options">
                        <!-- 记住登录状态复选框 -->
                        <el-checkbox v-model="loginForm.rememberMe">下次自动登录</el-checkbox>
                        <!-- 忘记密码链接 -->
                        <a href="#" class="forgot-password">忘记密码</a>
                    </div>

                    <!-- 登录按钮 -->
                    <div class="form-group">
                        <el-button type="primary" size="large" class="login-btn" :loading="isLoading"
                            @click="handleLogin">
                            登录
                        </el-button>
                    </div>

                    <!-- 社交登录区域 -->
                    <div class="social-login">
                        <!-- 分割线 -->
                        <div class="divider">
                            <span>或使用以下方式登录</span>
                        </div>
                        <!-- 社交登录按钮组 -->
                        <div class="social-buttons">
                            <!-- QQ登录按钮 -->
                            <button class="social-btn qq" @click="socialLogin('qq')">
                                <img src="../assets/icons/qq.svg" alt="QQ" />
                            </button>
                            <!-- 微信登录按钮 -->
                            <button class="social-btn wechat" @click="socialLogin('wechat')">
                                <img src="../assets/icons/wechat.svg" alt="微信" />
                            </button>
                            <!-- GitHub登录按钮 -->
                            <button class="social-btn github" @click="socialLogin('github')">
                                <img src="../assets/icons/github.svg" alt="GitHub" />
                            </button>
                        </div>
                    </div>

                    <!-- 导航链接区域 -->
                    <div class="nav-links">
                        <!-- 返回首页链接 -->
                        <router-link to="/" class="nav-link">返回首页</router-link>
                        <span class="separator">·</span>
                        <!-- 用户注册链接 -->
                        <a href="#" class="nav-link" @click.prevent="navigateToRegister">用户注册</a>
                    </div>
                </div>
            </div>
        </main>

        <!-- 统一页脚组件 -->
        <AppFooter />

        <!-- 页面切换动画组件 -->
        <PageTransition 
            v-if="showTransition" 
            :loading-text="transitionText" 
            :hint-text="transitionHint"
            :duration="1000"
        />
    </div>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

// Vue 3 组合式 API - 提供响应式数据管理
import { ref, reactive, onMounted } from 'vue'
// Vue Router - 提供路由导航和路由参数获取功能
import { useRouter, useRoute } from 'vue-router'
// Element Plus 组件 - 用于消息提示
import { ElMessage } from 'element-plus'
// Element Plus 图标组件 - 用于界面图标显示
import { Message, Lock } from '@element-plus/icons-vue'

// 自定义组件导入
import AppHeader from '../components/AppHeader.vue'  // 统一导航栏组件
import AppFooter from '../components/AppFooter.vue'  // 统一页脚组件
import PageTransition from '../components/PageTransition.vue' // 页面切换动画组件

// API工具导入
import { post, API_PATHS } from '../utils/api'
// 认证工具导入 - 用于用户登录状态管理
import { login as authLogin } from '../utils/auth'

// ==================== 类型定义 ====================

// 登录请求数据接口
interface LoginRequest {
    email: string
    password: string
    rememberMe: boolean
}

// 登录响应数据接口
interface LoginData {
    user: {
        id: number
        email: string
        nickname: string
        avatar?: string
        role: string
    }
    token: string
    refreshToken: string
}

// 社交登录响应数据接口
interface SocialLoginData {
    authUrl: string
    platform: string
}

// ==================== 路由和响应式数据 ====================

// 路由实例获取
const router = useRouter()  // 用于编程式导航
const route = useRoute()    // 用于获取当前路由信息

// 响应式数据定义
const currentLanguage = ref('zh-CN')  // 当前选择的语言，默认为中文简体
const isLoading = ref(false)          // 登录按钮的加载状态
const showTransition = ref(false)     // 控制页面切换动画的显示
const transitionText = ref('')        // 动画加载文本
const transitionHint = ref('')        // 动画提示文本
const isUsingSampleData = ref(false)  // 是否使用示例数据

// 登录表单数据对象
const loginForm = reactive({
    email: '',        // 用户邮箱
    password: '',     // 用户密码
    rememberMe: true  // 是否记住登录状态
})

// ==================== 示例数据 ====================

// 示例用户数据 - 当API调用失败时使用
const sampleUserData = {
    id: 1001,
    email: 'demo@example.com',
    nickname: '演示用户',
    avatar: 'https://via.placeholder.com/100x100/4F46E5/FFFFFF?text=U',
    role: 'user'
}

// ==================== 方法函数 ====================

/**
 * 使用示例数据登录
 * @description 当API调用失败时，使用示例数据进行登录
 */
const useSampleData = () => {
    isUsingSampleData.value = true
    const userInfo = {
        ...sampleUserData,
        email: loginForm.email || sampleUserData.email
    }
    
    // 调用认证工具进行登录
    authLogin(userInfo, loginForm.rememberMe)
    
    // 如果选择记住我，保存邮箱到本地存储
    if (loginForm.rememberMe) {
        localStorage.setItem('savedEmail', loginForm.email)
    } else {
        localStorage.removeItem('savedEmail')
    }
    
    ElMessage.success('登录成功（示例数据）！')
    
    // 处理登录后的跳转逻辑
    const redirectUrl = route.query.redirect as string
    if (redirectUrl) {
        router.push(redirectUrl)
    } else {
        router.push('/')
    }
}

/**
 * 处理用户登录
 * @description 验证用户输入并执行登录流程，包括表单验证、API调用和状态管理
 */
const handleLogin = async () => {
    // 验证表单数据是否完整
    if (!loginForm.email || !loginForm.password) {
        ElMessage.warning('请输入邮箱和密码')
        return
    }

    // 验证邮箱格式
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(loginForm.email)) {
        ElMessage.warning('请输入有效的邮箱地址')
        return
    }

    // 验证密码长度
    if (loginForm.password.length < 6) {
        ElMessage.warning('密码长度至少6位')
        return
    }

    // 设置加载状态，防止重复提交
    isLoading.value = true

    try {
        // 准备登录请求数据
        const loginData: LoginRequest = {
            email: loginForm.email,
            password: loginForm.password,
            rememberMe: loginForm.rememberMe
        }

        // 调用后端登录API
        const response = await post<LoginData>(API_PATHS.AUTH.LOGIN, loginData)

        if (response && response.success && response.data) {
            // 登录成功处理
            const user = response.data.user
            const token = response.data.token
            
            // 调用认证工具进行登录，传递记住我状态
            authLogin(user, loginForm.rememberMe)
            
            // 如果选择记住我，保存邮箱到本地存储
            if (loginForm.rememberMe) {
                localStorage.setItem('savedEmail', loginForm.email)
            } else {
                localStorage.removeItem('savedEmail')
            }

            // 显示登录成功消息
            ElMessage.success('登录成功！')

            // 处理登录后的跳转逻辑
            const redirectUrl = route.query.redirect as string
            if (redirectUrl) {
                router.push(redirectUrl)
            } else {
                router.push('/')
            }
        } else {
            // API返回错误
            ElMessage.error(response.message || '登录失败，请检查邮箱和密码')
            console.error('登录失败:', response.message)
        }
    } catch (error) {
        // 网络错误或API调用失败
        console.error('登录请求失败:', error)
        
        // 显示错误消息
        ElMessage.error('网络连接失败，请稍后重试')
        
        // 使用示例数据作为后备方案
        ElMessage.warning('后端服务暂时不可用，使用示例数据登录')
        useSampleData()
    } finally {
        // 重置加载状态
        isLoading.value = false
    }
}

/**
 * 社交登录处理
 * @param platform 社交平台类型
 * @description 处理不同社交平台的登录逻辑
 */
const socialLogin = async (platform: string) => {
    try {
        // 显示加载提示
        ElMessage.info(`正在跳转到${platform}登录...`)
        
        // 调用社交登录API
        const response = await post<SocialLoginData>(`${API_PATHS.AUTH.LOGIN}/social`, {
            platform: platform
        })
        
        if (response && response.success && response.data) {
            // 跳转到社交登录页面
            window.location.href = response.data.authUrl
        } else {
            ElMessage.error(response.message || `${platform}登录暂时不可用`)
            console.error(`${platform}登录失败:`, response.message)
        }
    } catch (error) {
        // 网络错误或API调用失败
        console.error(`${platform}登录请求失败:`, error)
        ElMessage.error(`${platform}登录暂时不可用，请稍后重试`)
        
        // 使用示例数据作为后备方案
        ElMessage.warning('后端服务暂时不可用，使用示例数据登录')
        useSampleData()
    }
}

/**
 * 导航到注册页面
 * @description 触发页面切换动画并导航到注册页面
 */
const navigateToRegister = () => {
    showTransition.value = true
    transitionText.value = '正在跳转...'
    transitionHint.value = '注册页面'
    setTimeout(() => {
        router.push('/register')
    }, 1000) // 动画持续时间
}

/**
 * 页面加载时初始化
 * @description 在页面加载时检查是否有保存的登录信息，并自动填充
 */
onMounted(() => {
    // 检查是否有保存的登录信息
    const savedEmail = localStorage.getItem('savedEmail')
    const rememberMe = localStorage.getItem('rememberMe')

    if (savedEmail && rememberMe === 'true') {
        // 如果有保存的邮箱且之前选择了记住我，则自动填充
        loginForm.email = savedEmail
        loginForm.rememberMe = true
    }
})
</script>

<style scoped lang="scss">
// 导入登录页组件样式
@use '../assets/styles/clients/_login';
</style>